<script setup >
import {ref} from "vue";
const city = ref('北京');
const products=ref([
  {
    src: 'img_ly/y1.png',
    alt: 'Image 1',
    name:'北戴河+阿那亚3日2晚私家团·',
    text: '4.8分',
    description: '1189人出游',
    price: '¥1438'
  },
  {
    src: 'img_ly/y2.png',
    alt: 'Image 2',
    name:'木兰围场+坝上+乌兰布统3日2晚跟团游',
    text: '4.9分',
    description: '157384人出游',
    price: '¥399'
  },
  {
    src: 'img_ly/y3.png',
    alt: 'Image 3',
    name:'秦皇岛+北戴河+山海关3日2晚跟团游',
    text: '5.0分',
    description: '4564人出游',
    price: '¥899'
  },
  {
    src: 'img_ly/y4.png',
    alt: 'Image 4',
    name:'古北水镇2日1晚半自助游',
    text: '4.8分',
    description: '34753出游',
    price: '¥499'
  },
  {
    src: 'img_ly/y5.png',
    alt: 'Image 5',
    name:'山东济南+泰山+曲阜三孔景区' +
        '3日2晚私家团',
    text: '4.9分',
    description: '75425人出游',
    price: '¥599'
  },])

const product1 = ref([
  {
    src: 'img_ly/y6.png',
    alt: 'Image 1',
    name:'北京--洛阳',
    text: '携程精选',
    description: '06-15 去 06-16 回   3.2折',
    price: '¥530'
  },
  {
    src: 'img_ly/y7.png',
    alt: 'Image 2',
    name:'北京--大连',
    text: '携程精选',
    description: '06-01 去 06-03 回  3.0折',
    price: '¥540'
  },
  {
    src: 'img_ly/y8.png',
    alt: 'Image 3',
    name:'北京--哈尔滨',
    text: '携程精选',
    description: '06-01 去 06-04 回  1.8折',
    price: '¥561'
  },
  {
    src: 'img_ly/y9.png',
    alt: 'Image 4',
    name:'北京--长春',
    text: '携程精选',
    description: '06-14 去 06-16 回  1.4折',
    price: '¥595'
  },
  {
    src: 'img_ly/y10.png',
    alt: 'Image 5',
    name:'北京--成都',
    text: '携程精选',
    description: '06-07 去 06-08回  1.3折',
    price: '¥600'
  }
])
const mp =()=> {
  this.refs.videoPlayer.addEventListener("canplay", () => {
    this.efs.videoPlayer.play();
  })

};
</script>

<template>
  <div class="all">
  <div class="container" style="text-align: left">
      <span style="font-size:20pt">当季</span>
      <span style="color:orange;font-size:20pt">热推</span>
    出发地 <el-select v-model="city" placeholder="选择一个城市" style="width:10%;">
    <el-option value="bj" label="北京"></el-option><el-option value="sh" label="上海"></el-option>
      <el-option value="cz" label="常州"></el-option><el-option value="wh" label="武汉"></el-option>
      <el-option value="qd" label="青岛"></el-option><el-option value="nj" label="南京"></el-option>
      <el-option value="sz" label="深圳"></el-option><el-option value="cs" label="长沙"></el-option>
      <el-option value="sy" label="三亚"></el-option><el-option value="xm" label="厦门"></el-option>
      <el-option value="fz" label="福州"></el-option><el-option value="jn" label="济南"></el-option>
  </el-select>
  </div>
  <div class="total" style="display: flex">
  <div class="left" >
    <h3>当季热卖--跟团游 <el-icon color=" #0aa1ed"><Position /> </el-icon></h3>
    <div class="product-container" style="width: 150%" >
      <div v-for="(item, index) in products" :key="index" class="product-item">
        <div class="product-image-container" >
          <img :src="item.src" :alt="item.name" class="product-image">
        </div>
        <div class="product-info">
          <h3 class="product-name">{{ item.name }}</h3>
          <div class="des">
            <span style="color: #00aaff">{{item.text}}</span>
           <span class="product-description">|{{ item.description }}</span>
          </div>
          <div class="product-price">
            <span >{{ item.price }}</span>
          </div></div></div></div></div>

    <div class="right" >
      <h3>周末畅游--特价机票 <el-icon color=" #0aa1ed"><Position /> </el-icon></h3>
      <div class="product-container" style="width: 150%;" >
        <div v-for="(item, index) in product1" :key="index" class="product-item">
          <div class="product-image-container" >
            <img :src="item.src" :alt="item.name" class="product-image">
          </div>
          <div class="product-info">
            <h3 class="product-name"style="text-align: left">{{ item.name }}</h3>
             <div class="dec">
              <span style="color: green;">{{item.text}}</span>
              <span class="product-description" >|{{ item.description }}</span>
             </div>
            <div class="product-price" >
              <span >{{ item.price }}</span>
            </div></div></div></div></div>
  </div>

  <div style="text-align: left">
    <span style="font-size:20pt">探索</span>
    <span style="color:orange;font-size:20pt">精彩世界</span>
    出发地 <el-select v-model="city" placeholder="选择一个城市" style="width:10%;">
    <el-option value="bj" label="北京"></el-option><el-option value="sh" label="上海"></el-option>
    <el-option value="cz" label="常州"></el-option><el-option value="wh" label="武汉"></el-option>
    <el-option value="qd" label="青岛"></el-option><el-option value="nj" label="南京"></el-option>
    <el-option value="sz" label="深圳"></el-option><el-option value="cs" label="长沙"></el-option>
    <el-option value="sy" label="三亚"></el-option><el-option value="xm" label="厦门"></el-option>
    <el-option value="fz" label="福州"></el-option><el-option value="jn" label="济南"></el-option>
  </el-select>
    <br>
    <video class="mp"
           ref="videoPlayer"
           src="video/yview1.mp4"
           autoplay
           muted
           loop
           controls
           style="width: 50%; height: 50%; object-fit: cover;"
    ></video>
  </div>
  </div>

</template>

<style scoped>
.total{
  overflow: auto;
}
.product-container {
  display: flex;
  flex-wrap: wrap; /* 如果需要换行显示商品 */
}

.product-item {
  display: flex;
  align-items: flex-start; /* 垂直对齐 */
  margin-bottom: 20px; /* 垂直间距 */
}

.product-image-container {
  flex: 0 0 auto; /* 图片宽度固定或按比例缩放 */
  margin-right: 20px; /* 图片与文字的间距 */
}

.product-image {
  width: 150px; /* 图片宽度 */
  height: auto; /* 保持图片比例 */
}

.product-info {
  flex: 1; /* 文字部分占据剩余空间 */
}

.product-name {
  font-size: 15px; /* 商品名称字体大小 */
  margin-bottom: 10px; /* 商品名称与描述之间的间距 */
}
.des{
  text-align: left;
  margin-bottom: 15px;
}

.product-description {
  font-size: 14px; /* 商品描述字体大小 */
  color: #666; /* 商品描述颜色 */
}

.product-price{
  display: flex;
  font-size: 18px; /* 价格值字体大小 */
  text-align: right;
  color: #0af; /* 价格颜色 */

}

.left {
  position: relative;
  width: 500px;
  height: 700px;
  overflow: hidden; /* 确保内容不会溢出到伪元素上 */
}
.dec{
  text-align: left;
  margin-bottom: 15px;
}
.right{
  float: right;
  /* 或其他你想要的宽度 */
  box-sizing: border-box;
  position: relative;
  width: 500px;
  height: 700px;
  overflow: hidden;
}


</style>